<template>
    <div class="personInfo">
      <div class="back">
        <div class="back-container">
          <div class="avatar-wrapper">
            <img src="../../../static/1447730639635536.png" alt="" width="100%" height="100%" >
          </div>
        </div>
      </div>
      <div class="front">
        <div class="top">
          <ul class="items-wrapper">
            <li class="item">
              <div class="left">姓名</div>
              <div class="right">王尼玛</div>
            </li>
            <li class="item">
              <div class="left">身份证号</div>
              <div class="right">330184199311254519</div>
            </li>
          </ul>
        </div>
        <div class="center">
          <ul class="items-wrapper">
            <li class="item">
              <div class="left">手机号</div>
              <div class="right">189-5522-5544</div>
            </li>
            <li class="item">
              <div class="left">邮箱</div>
              <div class="right">89651235@163.com</div>
            </li>
            <li class="item">
              <div class="left">QQ</div>
              <div class="right">651235824</div>
            </li>
            <li class="item">
              <div class="left">微信</div>
              <div class="right">sas22as</div>
            </li>
          </ul>
        </div>
        <div class="bottom">
          <button class="btn">保存</button>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "personInfo"
    }
</script>

<style scoped lang="stylus">
  .personInfo
    height calc(100% - 44px)
    background #f6f6f6
    position relative
    .back
      height 160px
      background url("../../../static/1447730639635536.png") left top /100%
      .back-container
        width 100%
        height calc(100% - 36px)
        background rgba(240,240,240,0.4)
        text-align center
        padding-top 36px
        .avatar-wrapper
          margin 0px auto
          width 84px
          height 84px
          border-radius 44px
          border 2px solid #ffffff
          overflow hidden
    .front
      margin 0 10px
      position relative
      top -30px
      z-index 20
      .top,.center
        background #ffffff
        border-radius 6px
        .items-wrapper
          .item
            height 44px
            border-bottom 1px solid #e4e4e4
            display flex
            color #333333
            &:last-child
              border-bottom none
            .left,.right
              height 44px
              line-height 44px
            .left
              flex 0 0 110px
              padding-left 10px
              text-align left
            .right
              flex 1
              padding-right 10px
              text-align right
      .center
        margin-top 10px
      .bottom
        margin-top 100px
        .btn
          width 100%
          height 44px
          border none
          border-radius 6px
          font-size 17px
          color #ffffff
          background #B7B7B7
          outline none
          &.isModify
            background #49A2FE
</style>
